<div class="example-container">
  <ul
    cdkListbox
    [disabled]="true"
    class="example-listbox"
    aria-labelledby="disabled-label"
  >
    <label class="example-label" id="disabled-label">Disabled Fruits</label>
    @for (fruit of fruits; track fruit) {
      <li
        class="example-option"
        [value]="fruit"
        cdkOption
        #option="cdkOption"
      >
        <mat-pseudo-checkbox
          [state]="option.pattern.selected() ? 'checked' : 'unchecked'"
        ></mat-pseudo-checkbox>
        <span>{{ fruit }}</span>
      </li>
    }
  </ul>
</div>
